<%@ page contentType="text/html;charset=UTF-8" %>
<%@ page import="org.apache.shiro.web.filter.authc.FormAuthenticationFilter"%>
<%@ include file="/WEB-INF/views/include/taglib.jsp"%>
<html>
<head>
	<title>${fns:getConfig('productName')} 登录</title>
	<meta name="decorator" content="blank"/>
	<link href="${ctxStatic}/qxfw/login/css/styles.css" type="text/css" media="screen" rel="stylesheet" />
	<link href="${ctxStatic}/zhongji/admin/css/jquery-ui-1.8.16.custom.css" rel="stylesheet">
	<style type="text/css">
	 
      html,body{background-color:#1c77ac; background-image:url(${ctxStatic}/qxfw/login/images/light.png);background-repeat:no-repeat; background-position:center top; overflow:hidden;}
	  #mainBody {width:100%;height:100%;position:absolute;z-index:-100;}
	  .cloud {position:absolute;top:0px;left:0px;width:100%;height:100%;background:url(${ctxStatic}/qxfw/login/images/cloud.png) no-repeat;z-index:-9999;opacity:0.5;}
	  #cloud2 {z-index:-9999;}
	  .loginbody{background:url(${ctxStatic}/qxfw/login/images/loginbg3.png) no-repeat center center; width:100%; height:585px; overflow:hidden; position:absolute;}
	  .logintop{height:47px; position:absolute; top:0; background:url(${ctxStatic}/qxfw/login/images/loginbg1.png) repeat-x;z-index:100; width:100%;}
      .logintop span{color:#fff; line-height:51px;font-size: 15px; background:url(${ctxStatic}/qxfw/login/images/loginsj.png) no-repeat 21px 18px; text-indent:44px; color:#afc5d2; float:left;}
      .form-signin-heading{font-family:Helvetica, Georgia, Arial, sans-serif, 黑体;font-size:36px;margin-bottom:20px;color:#0663a2;}
      .form-signin{position:relative;text-align:left;width:390px;margin:0 auto 20px;background-color:#fff;
        	-moz-box-shadow:0 1px 2px rgba(0,0,0,.05);box-shadow:0 1px 2px rgba(0,0,0,.05);padding-top: 22px;height: 170px;}
      .form-signin .checkbox{margin-bottom:10px;color:#0663a2;} .form-signin .input-label{font-size:16px;line-height:23px;color:#999;}
      .form-signin .input-block-level{font-size:16px;height:auto;margin-bottom:15px;padding:7px;*width:283px;*padding-bottom:0;_padding:7px 7px 9px 7px;}
      .form-signin .btn.btn-large{font-size:16px;} .form-signin #themeSwitch{position:absolute;right:15px;bottom:10px;}
      .form-signin div.validateCode {padding-bottom:15px;} .mid{vertical-align:middle;}
      .header{height:120px;padding-top:20px;} .alert{position:relative;width:300px;margin:0 auto;*padding-bottom:0px;}
      label.error{background:none;width:270px;font-weight:normal;color:inherit;margin:0;}
      body #header {width: 517px;height: 41px;margin: 0 auto 0px;    border-top-left-radius: 6px;border-top-right-radius: 6px;}
	  #header {
		width: 780px;
		background: #D3EDFA;
		border-bottom: #b2ccd0 solid 1px;text-align: left;   
		} 	
	   #content{border-radius: 6px;border: 1px solid #b2ccd0;height:275px;box-shadow: 0px 0px 20px #1a99e2;}
	   #wrapper{padding: 90px 20px 0 20px;}
	   .icon-user{margin-right: 7px;}
	   .loginbm{height:50px; line-height:50px; text-align:center; background:url(${ctxStatic}/qxfw/login/images/loginbg2.png) repeat-x;position:absolute; bottom:0; width:100%; color:#0b3a58;}
	   .loginbm2{height:50px; line-height:50px; text-align:center; background:url(${ctxStatic}/qxfw/login/images/loginbg2.png) repeat-x;position:absolute; bottom:0px; width:100%; color:#0b3a58;}
    </style>
    <script type="text/javascript" src="${ctxStatic}/qxfw/login/js/cloud.js"></script>
	<script type="text/javascript">
		$(document).ready(function() {
			$("#loginForm").validate({
				rules: {
					validateCode: {remote: "${pageContext.request.contextPath}/servlet/validateCodeServlet"}
				},
				messages: {
					username: {required: "请填写用户名."},password: {required: "请填写密码."},
					validateCode: {remote: "验证码不正确.", required: "请填写验证码."}
				},
				errorLabelContainer: "#messageBox",
				errorPlacement: function(error, element) {
					error.appendTo($("#loginError").parent());
				} 
			});
		});
		// 如果在框架或在对话框中，则弹出提示并跳转到首页
		if(self.frameElement && self.frameElement.tagName == "IFRAME" || $('#left').length > 0 || $('.jbox').length > 0){
			alert('未登录或登录超时。请重新登录，谢谢！');
			top.location = "${ctx}";
		}
	</script>
</head>
<body>
<!-- cloud -->
<div id="cloud1" class="cloud"></div>
<div id="cloud2" class="cloud"></div>
	<div id="mainBody">
	</div>
<!-- top -->
    <div class="loginbody">
		<div class="logintop">
		    <span>欢迎登录${fns:getConfig('productName')}</span>
		</div>
		<div class="header">
			<div id="messageBox" class="alert alert-error ${empty message ? 'hide' : ''}"><button data-dismiss="alert" class="close">×</button>
				<label id="loginError" class="error">${message}</label>
			</div>	
		</div>
<!-- body -->
	    <div id="wrapper">
	        <div id="content">
		<!--[if lte IE 6]><br/><div class='alert alert-block' style="text-align:left;padding-bottom:10px;"><a class="close" data-dismiss="alert">x</a><h4>温馨提示：</h4><p>你使用的浏览器版本过低。为了获得更好的浏览体验，我们强烈建议您 <a href="http://browsehappy.com" target="_blank">升级</a> 到最新版本的IE浏览器，或者使用较新版本的 Chrome、Firefox、Safari 等。</p></div><![endif]-->
	
	    <!--  <div id="header">
	       <img src="${ctxStatic}/zhongji/admin/images/logo.png"  style="height:40px;margin-top:7px;"   alt="logo">		
	    </div>	-->
	    <div id="darkbanner" class="banner320">
	        <h2>${fns:getConfig('productName')}</h2>
	    </div>
	    <div id="darkbannerwrap">
	    </div>    
		<form id="loginForm" class="form-signin" action="${ctx}/login" method="post">
			<p>
				<label class="loginlabel" for="username">登录名:</label>
				<input type="text" id="username" name="username" class="logininput ui-keyboard-input ui-widget-content ui-corner-all" value="${username}">
			</p>
			<p>
			<label class="loginlabel" for="password">密&nbsp;&nbsp;码:</label>
			<input type="password" id="password" name="password" class="logininput" >
			</p>
			<c:if test="${isValidateCodeLogin}"><div class="validateCode" >
				<label class="loginlabel" for="validateCode">验证码</label>
				<sys:validateCode name="validateCode" inputCssStyle="margin-bottom:0;"/>
			</div></c:if><%--
			<label for="mobile" title="手机登录"><input type="checkbox" id="mobileLogin" name="mobileLogin" ${mobileLogin ? 'checked' : ''}/></label> --%>
	
			<button class="btn" type="submit" style="margin-left: 89px;border-radius: 6px;background: #3C95C8; color: #fff;height: 31px;width: 90px;font-size: 17px;"><i class="icon-user"></i>登 录</button>&nbsp;&nbsp;
			<label for="rememberMe" title="下次不需要再登录" style="font-size: 14px; margin-top: 2px;"><input type="checkbox" id="rememberMe" name="rememberMe" ${rememberMe ? 'checked' : ''}/> 记住我（公共场所慎用）</label>
		</form>
		
		<script src="${ctxStatic}/flash/zoom.min.js" type="text/javascript"></script>
		</div>
		</div>
	</div>
<!-- footer -->
	<div class="loginbm2">
	   <div class="footer" style="text-align: center;padding-bottom: 5px;">
			Copyright &copy; 2012-${fns:getConfig('copyrightYear')}  - Powered By zf ${fns:getConfig('version')} 
		</div>
	</div>
</body>
</html>
